<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<title>医院-订单结算</title>
</head>
<body>
	<!-- <div class="panel panel-default">
	    <div class="panel-body form-group" style="margin-bottom:0px;">
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label>
	        <div class="col-sm-2">
	            <input type="text" class="form-control" name="Name" id="search_name"/>
	        </div>
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label>
	        <div class="col-sm-2">
	            <input type="text" class="form-control" name="Name" id="search_tel"/>
	        </div>
	        <div class="col-sm-1 col-sm-offset-4">
	            <button class="btn btn-primary" id="search_btn">查询</button>
	        </div>
	     </div>
	</div> -->
	<table id="mytab" class="table table-hover"></table>
	<div class="modal inmodal fade" id="SettleModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">订单结算</h4>
               	</div>
                <div class="modal-body">
                	<input type="hidden" id="userorderid"/>
                	<div class="form-group">
                		<label>当前已缴纳押金总额：</label>
                		<input type="text" disabled="disabled" min="1" id="totaldeposit" class="form-control" style="width:300px;" placeholder="">
                		<label>实际产生的费用（医院线下统计）：</label>
                		<input type="text" onkeyup="num(this)" min="1" id="userorderhprice" class="userorderhprice form-control" style="width:300px;" placeholder="请输入增加的押金金额">
                	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="SettleSubmit()" id="SettleSubmit">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	<script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script type="text/javascript">
    	//根据窗口调整表格高度
	    $(window).resize(function() {
	        $('#mytab').bootstrapTable('resetView', {
	            height: tableHeight()
	        })
	    })
	    //生成用户数据
	    $('#mytab').bootstrapTable({
	        method: 'get',
	        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
	        url:"${pageContext.request.contextPath}/Main/OrderMan/OrderAjax.action",//要请求数据的文件路径
	        height:tableHeight(),//高度调整
	        striped: true, //是否显示行间隔色
	        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
	        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
	        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
	        pageNumber: 1, //初始化加载第一页，默认第一页
	        pagination:true,//是否分页
	        queryParamsType:'limit',//查询参数组织方式
	        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
	            return {//这里的params是table提供的    
	                offset : params.offset,//从数据库第几条记录开始    
	                limit : params.limit,
	                type:3
	            //找多少条    
	            };},//请求服务器时所传的参数
	        sidePagination:'server',//指定服务器端分页
	        pageSize:10,//单页记录数
	        pageList:[10,30,50,100],//分页步进值
	        showRefresh:true,//刷新按钮
	        showColumns:true,
	        clickToSelect: true,//是否启用点击选中行
	        toolbarAlign:'right',//工具栏对齐方式
	        buttonsAlign:'right',//按钮对齐方式
	        toolbar:'#toolbar',//指定工作栏
	        columns:[
	            {
	                title:'全选',
	                field:'select',
	                //复选框
	                checkbox:true,
	                width:25,
	                align:'center',
	                valign:'middle'
	            },
	            {
	                title:'订单ID',
	                field:'userorderid',
	                visible:true
	            },
	            {
	                title:'病人姓名',
	                field:'familyname',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'住院部门',
	                field:'userorderhospprimarydept',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'预约医院时间',
	                field:'userorderchosehosptime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'预约医生',
	                field:'docname',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'当前需要缴纳押金',
	                field:'userorderdeposit',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'已缴纳的押金总额',
	                field:'userordertotaldeposit',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'住院实际产生费用',
	                field:'userorderhprice',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'状态',
	                field:'userorderstatename',
	                align:'center',
	                //列数据格式化
	                //formatter:operateFormatter
	            },
	            {
	                title:'操作',
	                field:'userorderstateid',
	                align:'center',
	                //列数据格式化
	                formatter:operateConfirm
	            }
	        ],
	        locale:'zh-CN',//中文支持,
	        responseHandler:function(rows){
	            //在ajax获取到数据，渲染表格之前，修改数据源
	            return rows;
	        }
    	})
    	//对接收的数据作规范化，为空就显示“未填写”
    	function nullChange(value,row,index){
			if(value=='null'){
				return '未填写'
			}else{
				return value;
			}
  		}
    	//对订单操作列添加操作标签
	    function operateConfirm(value,row,index){
	    	return '<button class="btn btn-primary" data-toggle="modal" data-target="#SettleModal" style="height:30px" onclick="OrderSettle('+row.userorderid+','+row.userordertotaldeposit+')">订单结算</button>';
	    }
	    //查询按钮事件
	    $('#search_btn').click(function(){
	        $('#mytab').bootstrapTable('refresh', {url: '#'});
	    })
	    //tableHeight函数
	    function tableHeight(){
	        //可以根据自己页面情况进行调整
	        return $(window).height() -280;
	    }
	    function refreshTab(){
	  		$('#mytab').bootstrapTable('refresh');
	  	}
	  	//操作函数（订单结算）
	    function OrderSettle(userorderid,userordertotaldeposit){
	    	//$.alert('结算订单id：'+userorderid);
	    	$("#userorderid").val(userorderid);
	    	$("#totaldeposit").val(userordertotaldeposit);
	    }
	  	function SettleSubmit(){
	  		var totaldeposit = $("#totaldeposit").val();
	  		var userorderid=$("#userorderid").val();
	  		var userorderhprice = $("#userorderhprice").val();
	  		if(userorderhprice==''){
	  			$.alert('价格不可为空，注意金额格式！');
	  			return false;
	  		}
	  		if(parseFloat(totaldeposit)<parseFloat(userorderhprice)){
	  			$.alert('实际产生的费用不可以大于已缴纳押金！');
	  			return false;
	  		}
	  		$.confirm({
			    title: '提示!',
			    content: '是否结算押金？',
			    type: 'blue',
			    typeAnimated: true,
			    buttons: {
			    	确定: function () {
			    		$("#SettleSubmit").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
    		    		$("#SettleSubmit").prop('disabled',true);
			    		//向服务器发送医院确认订单操作！
			        	$.ajax({
			        		type:"post",
			        		url:"${pageContext.request.contextPath}/Main/OrderMan/OrderSettleSubmit.action",
			        		async: true,
			                data:"userorderid="+userorderid+"&userorderhprice="+userorderhprice,
			               	success:function(data){
			               		$("#SettleSubmit").html('提交');
		    		    		$("#SettleSubmit").prop('disabled',false);
			               		$.alert(data.msg);
			               		if(data.code==100){
			               			$('#SettleModal').modal('hide');
			               			refreshTab();
			               		}
			               	},error:function(request){
			               		alert("请求出错了！");
			               		$("#SettleSubmit").html('提交');
		    		    		$("#SettleSubmit").prop('disabled',false);
			               	}
			        	})
			    	},
					取消: function () {$('#SettleModal').modal('hide');},
			    }	
			});
	  	}
	  	function num(obj){
        	obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        	obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
        	obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
        	obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }
    </script>
</body>
</html>